<template>
  <div class="question-view">
    <LearningStats />
    
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="main-content">
          <QuestionInput />
          
          <div class="questions-header">
            <div class="title-section">
              <h2>问题列表</h2>
              <el-tag type="info">共 {{ questions.length }} 个问题</el-tag>
            </div>
            
            <div class="filter-section">
              <el-input
                v-model="searchKeyword"
                placeholder="搜索问题..."
                class="search-input"
                clearable
                @input="handleSearch"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              
              <el-select
                v-model="sortBy"
                placeholder="排序方式"
                class="sort-select"
              >
                <el-option label="最新提问" value="newest" />
                <el-option label="最早提问" value="oldest" />
                <el-option label="难度升序" value="difficultyAsc" />
                <el-option label="难度降序" value="difficultyDesc" />
              </el-select>
            </div>
          </div>
          
          <el-scrollbar height="calc(100vh - 300px)" class="questions-scrollbar">
            <transition-group name="question-list" tag="div" class="questions-container">
              <QuestionList 
                :questions="sortedQuestions" 
                :loading="loading"
                class="questions-list"
              />
            </transition-group>
          </el-scrollbar>
        </div>
      </el-col>
      
      <el-col :span="8">
        <div class="sidebar">
          <el-card class="topic-card">
            <template #header>
              <div class="card-header">
                <span>热门主题</span>
                <el-button type="primary" link>
                  查看全部
                </el-button>
              </div>
            </template>
            
            <div class="topics-cloud">
              <el-tag
                v-for="topic in topics"
                :key="topic"
                :type="randomTagType()"
                class="topic-tag"
                @click="handleTopicClick(topic)"
              >
                {{ topic }}
              </el-tag>
            </div>
          </el-card>
          
          <el-card class="quick-stats">
            <template #header>
              <div class="card-header">
                <span>学习进度</span>
              </div>
            </template>
            
            <el-progress
              type="circle"
              :percentage="learningProgress"
              :status="progressStatus"
            />
            
            <div class="stats-details">
              <div class="stat-item">
                <div class="stat-value">{{ statistics.learnedCount || 0 }}</div>
                <div class="stat-label">已掌握</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ statistics.collectedCount || 0 }}</div>
                <div class="stat-label">已收藏</div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useQuestionStore } from '../stores/question'
import QuestionInput from '../components/QuestionInput.vue'
import QuestionList from '../components/QuestionList.vue'
import LearningStats from '../components/LearningStats.vue'
import { debounce } from 'lodash-es'

const questionStore = useQuestionStore()
const loading = ref(false)
const searchKeyword = ref('')
const sortBy = ref('newest')
const topics = ref([])

const questions = computed(() => questionStore.questions)
const statistics = computed(() => questionStore.statistics || {})

const learningProgress = computed(() => {
  if (!statistics.value.totalQuestions) return 0
  return Math.round((statistics.value.learnedCount / statistics.value.totalQuestions) * 100)
})

const progressStatus = computed(() => {
  if (learningProgress.value >= 80) return 'success'
  if (learningProgress.value >= 50) return 'warning'
  return ''
})

const sortedQuestions = computed(() => {
  let sorted = [...questions.value]
  switch (sortBy.value) {
    case 'oldest':
      sorted.reverse()
      break
    case 'difficultyAsc':
      sorted.sort((a, b) => a.difficulty - b.difficulty)
      break
    case 'difficultyDesc':
      sorted.sort((a, b) => b.difficulty - a.difficulty)
      break
  }
  return sorted
})

const handleSearch = debounce(async () => {
  if (searchKeyword.value) {
    loading.value = true
    try {
      await questionStore.searchQuestions(searchKeyword.value)
    } finally {
      loading.value = false
    }
  } else {
    questionStore.fetchQuestions()
  }
}, 300)

const randomTagType = () => {
  const types = ['', 'success', 'warning', 'info']
  return types[Math.floor(Math.random() * types.length)]
}

const handleTopicClick = (topic) => {
  searchKeyword.value = topic
  handleSearch()
}

onMounted(async () => {
  loading.value = true
  try {
    await Promise.all([
      questionStore.fetchQuestions(),
      questionStore.getStatistics()
    ])
    topics.value = await questionStore.getAllTopics()
  } finally {
    loading.value = false
  }
})

watch(sortBy, () => {
  // 添加排序动画
  const container = document.querySelector('.questions-container')
  if (container) {
    container.style.minHeight = `${container.offsetHeight}px`
  }
})
</script>

<style scoped>
.question-view {
  padding: 20px;
}

.main-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  padding: 20px;
}

.questions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #EBEEF5;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-section h2 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.filter-section {
  display: flex;
  gap: 12px;
}

.search-input {
  width: 240px;
}

.sort-select {
  width: 140px;
}

.questions-scrollbar {
  margin: 16px -20px -20px;
  padding: 0 20px;
}

.questions-container {
  position: relative;
}

.question-list-enter-active,
.question-list-leave-active {
  transition: all 0.5s ease;
}

.question-list-enter-from,
.question-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.sidebar {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.topic-card,
.quick-stats {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.topics-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-tag {
  cursor: pointer;
  transition: all 0.3s ease;
}

.topic-tag:hover {
  transform: translateY(-2px);
}

.quick-stats {
  text-align: center;
}

.stats-details {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

:deep(.el-progress-circle) {
  width: 120px !important;
  height: 120px !important;
}
</style> 